import React, { useState, useEffect } from "react"
import Router from 'next/router'
import Link from 'next/link'
import servicePath from '../config/apiUrl'
import "../static/style/components/Header.less"
import { Row, Col, Menu } from 'antd'
import { HomeOutlined, YoutubeOutlined, SmileOutlined } from '@ant-design/icons';
// import Icon from '@ant-design/icons';
import { getUrlToken } from '../utils/handler'
import _ from 'lodash'
const that = React





const Header = (props) => {

    console.log("propsHeader",props);

    const [navArray, setNavArray] = useState([])
    const [menuItSelect, setMenuItSelect] = useState([])

    const handleDefLinkSet = (arr, params) => {
        // let params = getUrlToken();
        console.log("params.id====handleDefLinkSet", arr)
        if (arr) {
            let tmp = _.findIndex(arr, o => {
                return o.id == params.id
            })
            console.log("tmp", tmp, [`${tmp}`])
            setMenuItSelect([`${tmp + 1}`])
        } else {
            return
        }


    }



    useEffect(() => {

        const fetchData = async () => {
            const result = await that.$http(servicePath.getTypeInfo).then(
                (res) => {
                    setNavArray(res.data.data)
                    return res.data.data
                }
            )
            console.log("header--- useEffect  --result", result)
            setNavArray(result)
            // handleDefLinkSet(result);

            console.log('componentDidMount', getUrlToken(), result)
            let obj = getUrlToken();
            if (obj) {
                handleDefLinkSet(result, obj);
            }

        }
        fetchData()
        console.log("propsHeader--useEff",props);



    }, [props])//注意：useEffect 第二个参数穿空数组，该函数只执行一次

    // 跳转到列表页
    const handleClick = e => {
        console.log("handleMenuClick===", e);
        setMenuItSelect(e.keyPath)
        if (e.key == 0) {
            Router.push('/')
        } else {
            Router.push(`/list?id=${e.key}`)
        }
    }



    return (
        <div className="header">
            <Row type="flex" justify="center">
                <Col xs={24} sm={24} md={10} lg={15} xl={10}>
                    <span className="header-logo">
                        <Link href={{ pathname: '/' }}>
                            <a>技术華</a>
                        </Link>
                    </span>
                    <span className="header-txt">专注前端开发，每年100集视频分享。</span>
                </Col>

                <Col className="menu-div" xs={0} sm={0} md={14} lg={8} xl={8}>
                    <Menu selectedKeys={menuItSelect} mode="horizontal" onClick={handleClick}>
                        <Menu.Item key="0">
                            <HomeOutlined />
                            首页
                        </Menu.Item>
                        {
                            navArray.map(it => {
                                return (
                                    <Menu.Item key={it.id} icon={React.createElement(require('@ant-design/icons')[it.icon])}>
                                        {it.typeName}
                                    </Menu.Item>
                                )
                            })
                        }
                    </Menu>
                </Col>
            </Row>
        </div>
    )
}


export default Header

